<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>NAGE API Home Page</title>
    <link rel="stylesheet" type="text/css" href="./static/css/wfSheet.css">

    <script type="text/javascript" src="./static/js/jquery-3.5.1.min.js"></script>
    <script type="text/javascript" src="./static/js/wfStatic.js"></script>
</head>
<body>
    <!--This is Nav-->
    <div class="main">
        <header class="nav">
            <h1>NAGE API / Descriptors to Targets</h1>
            <div class="annotate">This page is designed for internal test.</div>
        </header>
        <!--This is Main part-->
        <div class="content">
            <!--This is targets-->
            <div id="filter" class="half_row">
                <div id="dim_bar" class="row_inner adjacent">
                    <div class="inner_head">
                        <div class="title">
                            <div>
                                <h2>Dimensions</h2>
                                <div class="annotate">Here is the target list.</div>
                            </div>
                        </div>
                    </div>
                    <div id="multi_choice" class="inner_body">
                        <!-- <div>
                            <div class="dim_item btn">
                                <span class="dim_icon"></span>
                                <span class="dim_name">dim_item</span>
                            </div> -->
                    </div>
                </div>

                <div id="desc_panel" class="row_inner adjacent">
                    <div class="inner_head">
                        <div class="title">
                            <div>
                                <h2>Descriptors</h2>
                                <div class="annotate">Please choose 1 to 8 descriptors from below.</div>
                            </div>
                        </div>
                        <div class="search">
                            <div class="input">
                                <span>Search</span>
                            </div>
                        </div>
                    </div>
                    <div id="desc_pool" class="inner_body card_pool">
                        <!-- <div class="desc_item btn">
                                <span class="desc_icon"></span>
                                <span class="desc_name">desc_item</span>
                        </div> -->
                    </div>
                </div>
            </div>
            <!--This is descriptor area-->
            <section id="result" class="half_row">
                <div id="chosen_records" class="row_inner col">
                    <div class="inner_head">
                        <div class="title">
                            <div>
                                <h2>Descriptor Records</h2>
                                <div class="annotate">Here shows descriptors you have chosen.</div>
                            </div>
                        </div>
                        <div id="empty_records" class="btn btn_small">
                            <span>Empty</span>
                        </div>
                    </div>
                    <div id="chosen_descs" class="inner_body">
                        <!-- <div class="card">
                            <div class="card_top">Descriptor</div>
                            <div class="card_bottom">Dimension</div>
                        </div> -->
                    </div>
                </div>

                <div id="candidates" class="row_inner col">
                    <div class="inner_head">
                        <div class="title">
                            <div>
                                <h2>Candidates</h2>
                                <div class="annotate">Here shows the predicted candidates according to your choices.</div>
                            </div>
                        </div>
                        <div class="search">
                            <div class="input">
                                <span>Search</span>
                            </div>
                        </div>
                    </div>
                    <div id="candid_pool" class="inner_body card_pool">
                        <!-- <div class="card">
                            <div class="card_top">Candidate</div>
                            <div class="card_bottom">
                                <div class="card_num">No. 1</div>
                                <div class="card_anno">15.1</div>
                            </div>
                        </div> -->
                    </div>
                </div>
            </section>
        </div>
        <footer></footer>
    </div>
</body>
</html>